<template>
  <div>
    <!-- banner & search -->
    <div class="banner-search">
      <div class="city-wrap">
        <h3></h3>
      </div>
      <SwiperBanner :banners="home.banner" :height="290" />
      <div class="search-wrap"></div>
    </div>
    <!-- menus -->
    <div class="content" v-if="home.menus">
      <SwiperMenus :menus="home.menus"/>
    </div>
    <!-- public service -->
    <div class="card-panel-box">
      <h3 class="card-title">公共服务<span class="sub-title">public service</span> <span class="more">更多<i class="hm-icon icon-arrow_rgt"></i></span></h3>
      <div class="flex-box public-wrap">
        <div class="flex-item" v-for="(item, index) in publics" :key="index" @click="publicJump(item)">
          <i :class="item.icon"></i>
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>

    <!-- 大美xx -->
    <div class="card-panel-box" v-if="home.guide">
      <h3 class="card-title">大美龙江<span class="sub-title">beautiful longjiang</span></h3>
      <div class="flex-box beautiful-wrap">
        <div class="flex-item" v-for="(guide, index) in home.guide" :key="index" @click="guideJump(guide)">
          <LazyImage :item="guide"/>
        </div>
      </div>
    </div>

    <!-- 头条&城市介绍 -->
    <div class="card-panel-box" v-if="home.topnews || home.site_info">
      <!-- 头条 -->
      <div class="topnews-wrap" v-if="home.topnews">
        <img src="../../assets/img/icon/site_topnews.png"/>
        <a-carousel class="topnews-carousel" autoplay dotPosition="right">
          <p v-for="(top, index) in home.topnews" :key="index">{{top.title}}</p>
        </a-carousel>
        <i class="hm-icon icon-arrow_rgt"></i>
      </div>
      <!-- 城市介绍 -->
      <a-row class="site-desc-wrap" v-if="home.site_info">
        <a-col :span="7">
          <LazyImage :item="home.site_info"/>
        </a-col>
        <a-col class="site-info" :span="17">
          <div class="site-name">
            <span>{{home.site_info.name}}</span>
            <span>{{site_weather}}</span>
            <i class="hm-icon icon-more_entity"></i>
          </div>
          <p class="short-title">“{{home.site_info.short_title}}”</p>
          <p class="short-desc">{{home.site_info.introduction}}</p>
        </a-col>
      </a-row>
    </div>
    <!-- 热门酒店、景点 -->
    <div class="card-panel-box" v-if="home.scenic_type">
      <div class="tab-title">
        <span v-for="(item, index) in home.scenic_type" :key="index" :class="{'a-active': hotTabKey == index}" @click="changeTabs(item, index)">{{item.name}}</span>
      </div>
      <div class="hot-list">
        <div class="hot-item" v-for="(item, index) in home.scenics" :key="index">
          <LazyImage :item="item"></LazyImage>
          <div class="hot-body">
            <span class="label"><i class="hm-icon icon-remen"></i>热门</span>
            <p class="hot-title">{{item.title}}</p>
            <p class="hot-price">{{item.lowest_price > 0 ? '￥' + item.lowest_price : '免费'}}</p>
          </div>
        </div>
      </div>
      
    </div>

    <!-- 游记攻略 -->
    <div class="card-panel-box ad-list">
      <h3 class="card-title">游记攻略</h3>
      <LazyImage v-for="(item, index) in home.special" :key="index" :item="item" @click="publicJump(item)"/>
    </div>
  </div>
</template>

<script>
import SwiperBanner from '@components/swiper/swiper-banner.vue'
import SwiperMenus from '@components/swiper/swiper-menu.vue'
import LazyImage from '@components/lazyImage';

import {
  Row,
  Col,
  Carousel,
  Tabs,
} from 'ant-design-vue'
import {mapState, mapMutations, mapGetters } from 'vuex'

const PUBLIC_LIST = [{
  icon: 'hm-icon icon-zaixiantousu-v1',
  name: '在线投诉',
  link: '/complaint/index'
},{
  icon: 'hm-icon icon-fujin-v1',
  name: '附近',
  link: '/publicservice/nearby_index'
},{
  icon: 'hm-icon icon-hangbanzhushou-v1',
  name: '航班助手',
  link: '/air_tickets'
},{
  icon: 'hm-icon icon-zuche-v1',
  name: '包车/租车',
  link: '/custom/step1/3'
},{
  icon: 'hm-icon icon-zhaocesuo-v1',
  name: '找厕所',
  link: '/publicservice/toilet?keyword=厕所'
},]


export default {
  name: 'index',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Carousel.name]: Carousel,
    [Tabs.name]: Tabs,
    SwiperBanner,
    SwiperMenus,
    LazyImage,
  },
  data() {
    return {
      publics: PUBLIC_LIST,
      home: {},
      hotTabKey: 1,
    }
  },
  computed: {
    ...mapState(['USER_INFO', 'CITY']),
    ...mapGetters(['is_login'])
  },
  mounted() {
    this.getHomePage()
  },
  methods: {
    ...mapMutations(['set_city']),
    async getHomePage() {
      let home = await this.$api.getPerson({
        user_type: 'distributor',
        cid: '',
        uid: '',
        zone_code: '230100'
      })

      home.site_info.image = home.site_info.thumbnail_path
      
      this.home = home
    },
    publicJump(item){
      console.log(item);
      
    },
    changeTabs(key) {
      this.hotTabKey = key
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 17px;
  background-color: #ffffff;
}
.public-wrap {
  text-align: center;
  .hm-icon {
    font-size: 30px;
    color: @color-main;
  }
}
.beautiful-wrap {
  flex-wrap: wrap;
  .flex-item {
    flex-basis: 30%;
    height: 121px;
    border-radius: 5px;
    margin: 2.5px;
    &:first-child{
      flex: 0 0 100%;
      margin: 2.5px 0;
    }
  }
}
.topnews-wrap {
  display: flex;
  align-items: center;
  img {
    width: 70px;
  }
  .hm-icon {
    flex: 0 0 18px;
    font-size: 14px;
    color: #ccc;
  }
  .topnews-carousel {
    flex: 1;
    margin-left: 8px;
    font-size: 16px;
    /deep/ .a-carousel__item {
      .ellipsis(1);
    }
  }
}
.site-desc-wrap {
  margin-top: 10px;
  height: 138px;
  background-color: #f8f8f8;
  border-radius: 5px;
  overflow: hidden;
  .a-image {
    height: 138px;
  }
  .site-info {
    padding: 15px 10px;
  }
  .site-name {
    position: relative;
    font-weight: bolder;
    font-size: 20px;
    .hm-icon {
      color: #999;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      font-weight: normal;
    }
  }
  .short-title {
    font-size: 13px;
    color: #666;
    .ellipsis(1);
  }
  .short-desc {
    font-size: 12px;
    margin-top: 5px;
    color: #999;
    .ellipsis(3);
  }
}

.tab-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 10px;
  margin-bottom: 10px;
  span {
    flex: 1;
    font-size: 20px;
    text-align: center;
    .gradient(@color-gradient-main, @color-main, true);
    &.a-active {
      font-weight: 600;
    }
  }
  em {
    display: block;
    position: absolute;
    bottom: 0;
    left: 64%;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    .gradient(@color-gradient-main, @color-main, false);
    transition: left ease .3s;
    &.key1 {
      left: 22%;
    }
  }

}
.hot-list {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  padding: 5px;
  .hot-item {
    flex: 0 0 40%;
    margin-right: 16px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
    border-radius: 5px;
    .a-image {
      height: 127px;
    }
    .hot-body {
      position: relative;
      background-color: #ffffff;
      padding: 15px 8px;
      .label {
        position: absolute;
        top: -10px;
        left: 10px;
        display: inline-block;
        font-size: 12px;
        padding: 0 5px;
        line-height: 1.5;
        background-color: #ff7840;
        color: #ffffff;
        border-radius: 2px;
      }
    }
  }
}
.limit-sale-wrap {
  position: relative;
  padding-right: 15px;
  .shadow-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      border-radius: 5px;
    }
    &::before {
      transform: scale(.8) translateX(50px);
      background-color: #e3e7ed;
    }
    &::after {
      transform: scale(.9) translateX(15px);
    }
  }
  .limit-sale-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 138px;
      background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.5));
    }
    .a-image {
      width: 100%;
      height: 241px;
      img {
        object-fit: cover;
      }
    }
    .count-time {
      position: absolute;
      left: 0;
      top: 0;
      max-width: 60%;
      background-color: rgba(0, 0, 0, .25);
      color: #ffffff;
      border-radius: 0 10px 10px 0;
      padding: 3px 10px 3px 0;
      em {
        background-color: #ffffff;
        color: #333333;
        font-size: 12px;
        line-height: 2;
      }
    }
    .info-desc {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px 10px 10px;
      background-color: transparent;
      text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
      z-index: 2;
      color: #fff;
    }
  }
}
.ad-list {
  .a-image {
    height: 100px;
    margin: 5px 0;
    overflow: hidden;
    border-radius: 10px;
  }
}
</style>